<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="container">
          <div class="head">
            <div>
              <span style="font-size: 16px" class="title">项目信息</span>
            </div>
            <el-button @click="$router.go(-1)">返回</el-button>
          </div>
          <div class="list">
            <p class="title">
              项目名称：<span class="describe">{{
                state.detail.xiangmumingcheng
              }}</span>
            </p>
            <p class="title">
              项目类型：<span class="describe">{{
                state.detail.xiangmuleixing
              }}</span>
            </p>
            <p class="title">
              项目编号：<span class="describe">{{ state.detail.xmNo }}</span>
            </p>
            <p class="title">
              一级业务分类：<span class="describe">{{
                state.detail.yewufenlei1
              }}</span>
            </p>
            <p class="title">
              二级业务分类：<span class="describe">{{
                state.detail.yewufenlei2
              }}</span>
            </p>
            <p class="title">
              三级业务分类：<span class="describe">{{
                state.detail.yewufenlei3
              }}</span>
            </p>
            <p class="title">
              启动时间：<span class="describe">{{
                state.detail.qidongshijian
              }}</span>
            </p>
            <p class="title">
              招商状态：<span class="describe">{{
                state.detail.zhaoshang
              }}</span>
            </p>
            <p class="title">
              项目状态：<span class="describe">{{
                state.detail.zhuangtai
              }}</span>
            </p>
            <p class="title">
              项目档次：<span class="describe">{{
                state.detail.xiangmudangci
              }}</span>
            </p>
            <p class="title">
              商业面积：<span class="describe">{{
                state.detail.shangyemianji
              }}</span>
            </p>
            <p class="title">
              商业楼层：<span class="describe">{{
                state.detail.shangyelouceng
              }}</span>
            </p>
            <p class="title">
              所属城市：<span class="describe">{{
                state.detail.chengshi
              }}</span>
            </p>
            <p class="title">
              连锁项目：<span class="describe">{{
                state.detail.liansuo?.code == 1 ? "连锁" : "非连锁"
              }}</span>
            </p>
            <p class="title">
              投资额：<span class="describe">{{ state.detail.touzie }}</span>
            </p>
          </div>
          <div class="list">
            <p class="title">
              项目地址：<span class="describe">{{
                state.detail.xiangmudizhi
              }}</span>
            </p>
            <p class="title" style="flex: 1">
              运营供应商：<span class="describe">{{
                state.detail.yunyingshang
              }}</span>
            </p>
          </div>
          <p class="title">地址图片：</p>
          <div class="flex img-box">
            <img
              v-for="(item, index) in state.detail.xiangmudizhitupian"
              :src="item.filePath"
              :key="index"
              alt=""
            />
          </div>
          <p class="title" style="margin-top: 30px">
            项目简介：{{ state.detail.xaingmujieshao }}
          </p>
          <div class="intro-img flex">
            <div
              class="show-box"
              v-for="(item, index) in state.detail.xiangmutupian"
              :key="index"
            >
              <img v-if="item.fileType != 'mp4'" :src="item.filePath" alt="" />
              <video controls v-else :src="item.filePath"></video>
            </div>
          </div>
          <p class="title" style="margin-top: 30px">
            收藏数：<span class="describe">{{ state.detail.shoucangshu }}</span>
          </p>
          <p class="title" style="margin-top: 30px; width: 650px">
            备注：<span class="describe">{{ state.detail.beizhu }}</span>
          </p>
          <p class="title" style="margin-top: 30px">
            审核状态：<span class="describe">{{
              state.detail.shenhe?.code == 0
                ? "待审核"
                : state.detail.shenhe?.code == 1
                ? "审核通过"
                : "审核未通过"
            }}</span>
          </p>
        </div>
        <div class="providerTable">
          <el-tabs
            @tab-click="tabChange"
            v-model="state.activeName"
            class="provider-tabs"
          >
            <el-tab-pane class="tab-pane1" label="项目概况" name="1">
              <div
                class="intro"
                style="margin-top: 20px"
                v-html="state.detail.xiangmugaikuang"
              ></div>
              <div
                v-if="state.detail.shenhe?.code == 0 && state.check === '1'"
                class="operation flex-a"
              >
                <el-button @click="review(1)" size="large">通过</el-button>
                <el-button @click="review(-1)" size="large" type="primary"
                  >不通过</el-button
                >
              </div>
              <el-dialog
                class="list-dialog"
                show-close="false"
                width="40%"
                v-model="state.show"
                center
                style="padding: 0 30px"
              >
                <el-form :model="state.form">
                  <el-form-item label="不通过原因：">
                    <el-input
                      v-model="state.form.shenheBeizhu"
                      :maxlength="150"
                      type="textarea"
                      :rows="8"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <el-form-item class="note-button-group">
                  <el-button size="large" @click="state.show = false"
                    >取消</el-button
                  >
                  <el-button
                    class="ml50"
                    size="large"
                    type="primary"
                    @click="submitForm"
                  >
                    提交
                  </el-button>
                </el-form-item>
              </el-dialog>
            </el-tab-pane>
            <el-tab-pane class="principalInfo" label="人员管理" name="2">
              <el-button
                class="addPrincipal"
                type="primary"
                @click="onOperation({}, 'addPrincipal')"
                >添加负责人</el-button
              >
              <template v-for="(item, index) in state.peopleType" :key="index">
                <div class="principal">
                  <span class="title">{{ item.name }}</span>
                  <div class="principalTable">
                    <div
                      class="principal-list"
                      v-for="(people, number) in state.peopleData[item.value]"
                      :key="number"
                    >
                      <div class="introduction">
                        <div
                          v-if="
                            people.zhuanjiazhaopian &&
                            people.zhuanjiazhaopian.length
                          "
                          class="avatar"
                        >
                          <img
                            :src="people.zhuanjiazhaopian[0].filePath"
                            alt=""
                          />
                        </div>
                        <div class="intro-right">
                          <div class="right-head">
                            <span class="title">{{
                              people.zhuanjiamingcheng
                            }}</span>
                            <span class="ml40"
                              >手机：{{ people.lianxifangshi }}</span
                            >
                            <span class="ml40"
                              >邮箱：{{ people.youxiang }}</span
                            >
                          </div>
                          <p class="mt15">{{ people.yewuleixing }}</p>
                        </div>
                      </div>
                      <p class="title mt10">
                        项目业绩：{{ people.xiangmuyeji }}
                      </p>
                      <el-button
                        class="deleteButton"
                        style="min-width: 60px"
                        type="primary"
                        size="small"
                        @click="onOperation(people, 'deletePrincipal')"
                        >删除</el-button
                      >
                    </div>
                  </div>
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane
              class="principalInfo expertComment"
              label="专家留言板"
              name="3"
            >
              <div class="principal">
                <div class="principalTable">
                  <div
                    class="principal-list"
                    v-for="(item, index) in state.commentList"
                    :key="index"
                  >
                    <div class="introduction">
                      <div
                        class="avatar"
                        v-if="
                          item.zhuanjiazhaopian && item.zhuanjiazhaopian.length
                        "
                      >
                        <img :src="item.zhuanjiazhaopian[0].filePath" alt="" />
                      </div>
                      <div class="intro-right comment">
                        <div class="right-head flex-b">
                          <span class="title">{{
                            item.zhuanjiamingcheng
                          }}</span>
                          <span
                            v-if="item.renzhengjiav.code == 1"
                            class="title ml10"
                            style="color: #159bd5"
                            >认证V</span
                          >
                        </div>
                        <p class="mt15">{{ item.yewuleixing }}</p>
                      </div>
                    </div>
                    <p class="time">{{ item.createTime }}</p>
                    <div class="comment-button flex-b mt20">
                      <p class="title">{{ item.liuyanneirong }}</p>
                      <div class="button-group">
                        <el-button
                          style="min-width: 80px"
                          size="small"
                          type="primary"
                          @click="onOperation({ id: item.id }, 'addTop')"
                          >{{
                            item.zhiding.code == 1 ? "取消置顶" : "置顶"
                          }}</el-button
                        >
                        <el-button
                          style="min-width: 80px"
                          size="small"
                          type="primary"
                          @click="onOperation({ id: item.id }, 'addV')"
                          >{{
                            item.renzhengjiav.code == 1 ? "取消加V" : "加V"
                          }}</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane class="achievement" label="参与供应商" name="4">
              <div class="head">
                <div class="left">
                  <el-input
                    placeholder="请输入内容"
                    v-model="state.supplierParams.gongsimingcheng"
                    style="width: 350px"
                    size="large"
                  >
                    <template #append>
                      <el-button
                        @click="GetSupplierList"
                        style="min-width: 50px"
                        icon="Search"
                      />
                    </template>
                  </el-input>
                  <el-select
                    width="150"
                    show-border
                    class="ml20"
                    v-model="state.supplierParams.zhuyingyewu"
                    size="large"
                    placeholder="类型"
                    clearable
                    @change="GetSupplierList"
                  >
                    <el-option
                      v-for="item in state.supplierType"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    >
                      {{ item.dicLabel }}
                    </el-option>
                  </el-select>
                </div>
                <div class="right">
                  <el-button
                    @click="onOperation({}, 'addSupplier')"
                    type="primary"
                    size="large"
                    >添加供应商</el-button
                  >
                </div>
              </div>
              <el-table
                border
                :data="state.supplierList"
                style="width: 100%; margin-top: 40px"
              >
                <el-table-column property="gysNo" label="编号" align="center" />
                <el-table-column
                  property="zhuyingyewu1"
                  label="一级分类"
                  align="center"
                />
                <el-table-column
                  property="zhuyingyewu2"
                  label="二级分类"
                  align="center"
                />
                <el-table-column
                  property="zhuyingyewu3"
                  label="三级分类"
                  align="center"
                />
                <el-table-column
                  property="gongsimingcheng"
                  label="公司全称"
                  align="center"
                />
                <el-table-column
                  property="chanpinshuliang"
                  label="主打产品/数量"
                  width="130"
                  align="center"
                />
                <el-table-column
                  property="yejishuliang"
                  label="业绩案例/数量"
                  width="130"
                  align="center"
                />
                <el-table-column
                  property="yewufuzeren"
                  label="业务第一负责人"
                  width="130"
                  align="center"
                />
                <el-table-column
                  property="jishufuzerenshuliang"
                  label="技术第一负责人/数量"
                  width="160"
                  align="center"
                />
                <el-table-column
                  property="jingyinglianxirenshuliang"
                  width="140"
                  label="经营联系人/数量"
                  align="center"
                />
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button
                      v-if="state.check === '1'"
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'supplierDetail')"
                      >详情</el-button
                    >
                    <el-button
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'supplierDelete')"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <h-page
                v-if="state.supplierTotal"
                v-model:curr-page="state.supplierParams.current"
                :size="state.supplierParams.size"
                :total="state.supplierTotal"
                @change="GetSupplierList"
              />
            </el-tab-pane>
            <el-tab-pane class="achievement" label="使用产品" name="5">
              <div class="head">
                <div class="left">
                  <el-input
                    placeholder="请输入内容"
                    v-model="state.productParams.chanpinmingcheng"
                    style="width: 350px"
                    size="large"
                  >
                    <template #append>
                      <el-button
                        @click="GetProductList"
                        style="min-width: 50px"
                        icon="Search"
                      />
                    </template>
                  </el-input>
                  <el-select
                    width="150"
                    show-border
                    class="ml20"
                    v-model="state.productParams.chanpinleixing"
                    size="large"
                    placeholder="类型"
                    clearable
                    @change="GetProductList"
                  >
                    <el-option
                      v-for="item in state.productType"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    >
                      {{ item.dicLabel }}
                    </el-option>
                  </el-select>
                </div>
                <div class="right">
                  <el-button
                    type="primary"
                    @click="onOperation({}, 'addProduct')"
                    size="large"
                    >添加商品</el-button
                  >
                </div>
              </div>
              <el-table
                border
                :data="state.productList"
                style="width: 100%; margin-top: 40px"
              >
                <el-table-column property="cpNo" label="编号" align="center" />
                <el-table-column
                  property="chanpinmingcheng"
                  label="商品名称"
                  width="300"
                  align="center"
                />
                <el-table-column
                  property="chanpinleixing1"
                  label="一级分类"
                  align="center"
                />
                <el-table-column
                  property="chanpinleixing2"
                  label="二级分类"
                  align="center"
                />
                <el-table-column
                  property="chanpinleixing3"
                  label="三级分类"
                  align="center"
                />
                <el-table-column property="jiage" label="价格" align="center" />
                <el-table-column
                  property="zhuanjiamingcheng"
                  label="专家名称"
                  align="center"
                />
                <el-table-column
                  property="zhuanjialiuyanshu"
                  label="专家留言数"
                  align="center"
                />
                <el-table-column
                  property="gongyingshang"
                  label="供应商"
                  width="130"
                  align="center"
                />
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button
                      v-if="state.check === '1'"
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'productDetail')"
                      >详情</el-button
                    >
                    <el-button
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'productDelete')"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <h-page
                v-if="state.productTotal"
                v-model:curr-page="state.productParams.current"
                :size="state.productParams.size"
                :total="state.productTotal"
                @change="GetProductList"
              />
            </el-tab-pane>
            <el-tab-pane class="achievement" label="入驻品牌" name="6">
              <div class="head">
                <div class="left">
                  <el-input
                    placeholder="请输入内容"
                    v-model="state.brandParams.pinpaimingcheng"
                    style="width: 350px"
                    size="large"
                  >
                    <template #append>
                      <el-button
                        @click="GetBrandList"
                        style="min-width: 50px"
                        icon="Search"
                      />
                    </template>
                  </el-input>
                  <el-select
                    width="150"
                    show-border
                    class="ml20"
                    v-model="state.brandParams.pinpaifenlei"
                    size="large"
                    placeholder="类型"
                    clearable
                    @change="GetBrandList"
                  >
                    <el-option
                      v-for="item in state.brandType"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    >
                      {{ item.dicLabel }}
                    </el-option>
                  </el-select>
                </div>
                <div class="right">
                  <el-button
                    type="primary"
                    @click="onOperation({}, 'addBrand')"
                    size="large"
                    >添加品牌</el-button
                  >
                </div>
              </div>
              <el-table
                border
                :data="state.brandList"
                style="width: 100%; margin-top: 40px"
              >
                <el-table-column property="ppNo" label="编号" align="center" />
                <el-table-column
                  property="pinpaimingcheng"
                  label="品牌名称"
                  align="center"
                />
                <el-table-column
                  property="zhaoshang"
                  label="招商状态"
                  align="center"
                />
                <el-table-column
                  property="pinpaifenlei1"
                  label="品牌类型"
                  align="center"
                />
                <el-table-column
                  property="hezuoqixian"
                  label="合作期限/年"
                  align="center"
                />
                <el-table-column
                  property="chuangjianshijian"
                  label="创建时间/年"
                  align="center"
                />
                <el-table-column
                  property="pinpaigongyingshang"
                  label="品牌运营商"
                  width="200"
                  align="center"
                />
                <el-table-column
                  property="guoji"
                  label="国籍"
                  width="130"
                  align="center"
                />
                <el-table-column
                  property="pinpaidangci"
                  label="品牌档次"
                  width="160"
                  align="center"
                />
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button
                      v-if="state.check === '1'"
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'brandDetail')"
                      >详情</el-button
                    >
                    <el-button
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'brandDelete')"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <h-page
                v-if="state.brandTotal"
                v-model:curr-page="state.brandParams.current"
                :size="state.brandParams.size"
                :total="state.brandTotal"
                @change="GetBrandList"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  GetProject,
  ReviewProject,
  GetProjectPeople,
  DeleteProjectPrincipal,
  GetProjectExpertCommentList,
  ProjectExpertAddTop,
  ProjectExpertAddV,
  GetProjectSupplierList,
  DeleteProjectSupplier,
  GetProjectProductList,
  DeleteProjectProduct,
  GetProjectBrandList,
  DeleteProjectBrand,
} from "@/api/project";
import { baseMsg, elMessageTip } from "@/utils/utils";
import { GetDictionaryTree } from "@/api/system";
const route = useRoute();
const router = useRouter();
const state = reactive({
  detail: {},
  activeName: "1",
  typeOption: {},
  show: false,
  check: localStorage.getItem("check"),
  // 审核表单
  form: {
    id: "",
    shenheBeizhu: "",
    shenhe: null,
    xmNo: "",
  },

  // 人员管理类型
  peopleType: [
    {
      name: "项目负责人：",
      value: "xiangmufuzerenleixing_xiangmufuzeren",
    },
    {
      name: "项目专家：",
      value: "xiangmufuzerenleixing_xiangmuzhuanjia",
    },
  ],
  peopleData: {},

  // 专家留言板
  commentList: [],

  // 参与供应商
  supplierType: [],
  supplierList: [],
  supplierTotal: 0,
  supplierParams: {
    current: 1,
    size: 10,
    xmNo: "",
    gongsimingcheng: "",
    zhuyingyewu: "",
  },

  // 项目使用产品
  productParams: {
    current: 1,
    size: 10,
    xmNo: "",
    chanpinmingcheng: "",
    chanpinleixing: "",
  },
  productTotal: 0,
  productList: [],
  productType: [],

  // 项目入驻品牌
  brandParams: {
    current: 1,
    size: 10,
    xmNo: "",
    pinpaimingcheng: "",
    pinpaifenlei: "",
  },
  brandTotal: 0,
  brandList: [],
  brandType: [],
});
// 审核通过/不通过
const review = (status) => {
  state.form.id = state.detail.id;
  state.form.shenhe = status;
  state.form.xmNo = state.detail.xmNo;
  if (status === -1) {
    state.show = true;
  } else {
    ReviewProject(state.form).then((res) => {
      if (res.code == 4202) {
        baseMsg("操作成功");
        router.go(-1);
      }
    });
  }
};
// 审核不通过原因提交
const submitForm = () => {
  ReviewProject(state.form).then((res) => {
    if (res.code == 4202) {
      baseMsg("操作成功");
      router.go(-1);
    }
  });
};
// 查询项目详情
const GetList = () => {
  GetProject({ id: route.query.id }).then((res) => {
    if (res.code == 4201) {
      state.detail = res.data;
    }
  });
};
// 查询人员管理列表
const GetPeople = () => {
  GetProjectPeople({ xmNo: state.detail.xmNo }).then((res) => {
    if (res.code == 4201) {
      state.peopleData = res.data;
    }
  });
};
// 查询留言板列表
const GetComment = () => {
  GetProjectExpertCommentList({ xmNo: state.detail.xmNo }).then((res) => {
    if (res.code == 4201) {
      state.commentList = res.data;
    }
  });
};
// 查询参与供应商列表
const GetSupplierList = () => {
  GetProjectSupplierList(state.supplierParams).then((res) => {
    if (res.code == 4201) {
      state.supplierList = res.data.records;
      state.supplierTotal = res.data.total;
    }
  });
};
// 查询项目使用产品列表
const GetProductList = () => {
  GetProjectProductList(state.productParams).then((res) => {
    if (res.code == 4201) {
      state.productList = res.data.records;
      state.productTotal = res.data.total;
    }
  });
};
// 查询项目入驻品牌列表
const GetBrandList = () => {
  GetProjectBrandList(state.brandParams).then((res) => {
    if (res.code == 4201) {
      state.brandList = res.data.records;
      state.brandTotal = res.data.total;
    }
  });
};
// tab拦改变
const tabChange = (item) => {
  if (item.props.name == "1") {
    GetList();
  }
  if (item.props.name == "2") {
    GetPeople();
  }
  if (item.props.name == "3") {
    GetComment();
  }
  if (item.props.name == "4") {
    // 获取参与供应商分类
    state.supplierParams.xmNo = state.detail.xmNo;
    GetDictionaryTree({ dicModel: "gongyingshangpinzhuanjialeixing" }).then(
      (res) => {
        if (res.code == 4201) {
          state.supplierType = res.data;
        }
      }
    );
    GetSupplierList();
  }
  if (item.props.name == "5") {
    // 获取项目使用产品
    state.productParams.xmNo = state.detail.xmNo;
    GetDictionaryTree({ dicModel: "gongyingshangpinzhuanjialeixing" }).then(
      (res) => {
        if (res.code == 4201) {
          state.productType = res.data;
        }
      }
    );
    GetProductList();
  }
  if (item.props.name == "6") {
    // 获取项目入驻品牌
    state.brandParams.xmNo = state.detail.xmNo;
    GetDictionaryTree({ dicModel: "pinpaileixing" }).then((res) => {
      if (res.code == 4201) {
        state.brandType = res.data;
      }
    });
    GetBrandList();
  }
};
const onOperation = (params, operation) => {
  // 添加负责人
  if (operation === "addPrincipal") {
    router.push({
      path: `/xiangmu/addPrincipal`,
      query: {
        xmNo: state.detail.xmNo,
      },
    });
  }
  // 删除负责人
  if (operation === "deletePrincipal") {
    elMessageTip({
      ok() {
        DeleteProjectPrincipal({
          id: params.id,
        }).then((res) => {
          if (res.code == 4202) {
            baseMsg("删除成功");
            GetPeople();
          }
        });
      },
    });
  }
  // 置顶
  if (operation === "addTop") {
    ProjectExpertAddTop(params).then((res) => {
      if (res.code == 4202) {
        GetComment();
        baseMsg("操作成功");
      }
    });
  }
  // 加V
  if (operation === "addV") {
    ProjectExpertAddV(params).then((res) => {
      if (res.code == 4202) {
        GetComment();
        baseMsg("操作成功");
      }
    });
  }
  // 参与供应商详情
  if (operation === "supplierDetail") {
    router.push({
      path: `/gongyingshang/detail`,
      query: {
        id: params.gysId,
      },
    });
  }
  // 删除参与供应商
  if (operation === "supplierDelete") {
    elMessageTip({
      text: "删除供应商会同时删除关联该供应商的商品!",
      ok() {
        DeleteProjectSupplier({
          id: params.id,
        }).then((res) => {
          if (res.code == 4202) {
            GetSupplierList();
            baseMsg("删除成功");
          }
        });
      },
    });
  }
  // 添加参与供应商
  if (operation === "addSupplier") {
    router.push({
      path: `/xiangmu/addProvider`,
      query: {
        xmNo: state.detail.xmNo,
      },
    });
  }
  // 添加使用商品
  if (operation === "addProduct") {
    router.push({
      path: `/xiangmu/addProduct`,
      query: {
        xmNo: state.detail.xmNo,
      },
    });
  }
  // 使用产品详情
  if (operation === "productDetail") {
    router.push({
      path: `/chanpin/detail`,
      query: {
        id: params.cpId,
      },
    });
  }
  // 删除使用产品
  if (operation === "productDelete") {
    elMessageTip({
      ok() {
        DeleteProjectProduct({
          id: params.id,
        }).then((res) => {
          if (res.code == 4202) {
            GetProductList();
            baseMsg("删除成功");
          }
        });
      },
    });
  }
  // 添加品牌
  if (operation === "addBrand") {
    router.push({
      path: `/xiangmu/addBrand`,
      query: {
        xmNo: state.detail.xmNo,
      },
    });
  }
  // 入驻品牌详情
  if (operation === "brandDetail") {
    router.push({
      path: `/pinpai/detail`,
      query: {
        id: params.ppId,
      },
    });
  }
  // 删除入驻品牌
  if (operation === "brandDelete") {
    elMessageTip({
      ok() {
        DeleteProjectBrand({
          id: params.id,
        }).then((res) => {
          if (res.code == 4202) {
            GetBrandList();
            baseMsg("删除成功");
          }
        });
      },
    });
  }
};
watch(
  () => route.query,
  () => {
    state.brandParams.current = Number(route.query.page) || 1;
    state.productParams.current = Number(route.query.page) || 1;
    state.supplierParams.current = Number(route.query.page) || 1;
    GetBrandList();
    GetProductList();
    GetSupplierList();
  },
  { deep: true }
);
GetList();
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  .title {
    width: 25%;
    margin-bottom: 30px;
  }
}
.tab-pane1 {
  .intro {
    color: #000;
    width: 800px;
    word-break: break-all;
  }
}
.achievement {
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
// 专家评论
.expertComment {
  position: relative;
  .button-group {
    display: flex;
    flex-wrap: nowrap;
    float: right;
    margin-left: 10px;
    margin-top: -30px;
  }
}

.content {
  border: none !important;
  .container {
    padding: 50px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
    }
  }
}
.title {
  font-weight: bold;
  color: #000;
  font-size: 12px;
}
.describe {
  font-size: 12px;
  color: #333 !important;
}
.flex {
  display: flex;
  margin-bottom: 30px;
}
p {
  font-size: 12px;
  color: #333333;
}
.bottom {
  background-color: #ccc;
  height: 1px;
}
.providerTable {
  padding: 0px 50px 50px 50px;
}
.principalInfo {
  position: relative;
  .addPrincipal {
    position: absolute;
    right: 0px;
    top: -20px;
  }
  .principal {
    margin-top: 30px;
    .principalTable {
      margin-top: 15px;
      margin-bottom: 30px;
      border-radius: 6px;
      padding: 0 40px 0 15px;
      border: 1px solid #ccc;
      .principal-list {
        &:not(:last-child) {
          border-bottom: 1px solid #ccc;
        }
        position: relative;
        padding: 20px 0;
        .introduction {
          display: flex;
          .avatar {
            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              background-color: #ccc;
            }
          }
          .intro-right {
            margin-left: 10px;
            font-size: 12px;
          }
        }
        .deleteButton {
          position: absolute;
          right: 40px;
          top: 50%;
          transform: translateY(-50%);
        }
        .time {
          position: absolute;
          right: 50px;
          top: 20px;
        }
      }
    }
  }
}
.img-box {
  img {
    margin-top: 20px;
    width: 120px;
    height: 80px;
    border-radius: 4px;
  }
}
.show-box {
  &:not(:first-child) {
    margin-left: 20px;
  }
  img,
  video {
    margin-top: 20px;
    width: 140px;
    height: 80px;
    border-radius: 4px;
  }
}
.certifyInfo {
  .contain {
    & > div {
      margin-top: 40px;
      display: flex;
      p {
        margin-left: 2px;
      }
      &.top-bottom {
      }
      &.left-right {
        align-items: center;
        &.normal {
          align-items: baseline;
        }
      }
    }
  }
}
.operation {
  width: 500px;
  margin-top: 100px;
}
</style>
<style lang="scss">
.el-tabs__nav-wrap {
  &::after {
    display: none;
  }
}
.providerTable .el-table__header th {
  background-color: #f2f9fc !important;
}
.note-button-group {
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
